<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox"
    @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="单据状态" prop="produceBillState">
        <ElSelectBox :data="search" dataName="produceBillState" :options="dataInfo.options.produceBillState" />
      </ElFormItemBox>
      <ElFormItemBox label="数据状态" prop="dataBillState">
        <ElSelectBox :data="search" dataName="dataBillState" :options="dataInfo.options.dataBillState" />
      </ElFormItemBox>
      <ElFormItemBox label="生产状态" prop="taskProduceState">
        <ElSelectBox :data="search" dataName="taskProduceState" :options="dataInfo.options.taskProduceState" />
      </ElFormItemBox>
      <ElFormItemBox label="领料状态" prop="materialState">
        <ElSelectBox :data="search" dataName="materialState" :options="dataInfo.options.materialState" />
      </ElFormItemBox>
      <ElFormItemBox label="开单时间">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox>
    </template>
    <template #headR>
      <el-button type="" @click="() => {
        const _table = dataInfo.table
        let arr: any = []
        _table.tbody.forEach((el: any) => {
          if (el.materialState === 0) {
            arr.push(el)
          }
        })
        _table.selectArr = arr
      }">待领料</el-button>
      <el-button type="" @click="batchPrint(dataInfo.table.checkbox.list)"
        :disabled="dataInfo.table.checkbox.list.length === 0">批量打印</el-button>
      <el-button type="" :disabled="dataInfo.table.checkbox.list.length === 0" @click="() => {
        pup.loading = true
        pup.state = true
        proxy.$api.ProductionBusniess.GetMoreProduceTaskMaterialList({
          produceTaskBillNos: dataInfo.table.checkbox.list.map((el: any) => el.produceTaskBillNo),
        })
          .then((res: any) => {
            pup.loading = false
            pup.form.list = res
          })
          .catch(() => {

          });
      }">批量领料</el-button>
    </template>
    <template #produceBillStateName="{ row }">
      <ElTagBox :data="row.produceBillState" :options="dataInfo.options.produceBillState" />
    </template>
    <template #dataBillStateName="{ row }">
      <ElTagBox :data="row.dataBillState" :options="dataInfo.options.dataBillState" />
    </template>
    <template #taskProduceStateName="{ row }">
      <ElTagBox :data="row.taskProduceState" :options="dataInfo.options.taskProduceState" />
    </template>
    <template #materialStateName="{ row }">
      <ElTagBox :data="row.materialState" :options="dataInfo.options.materialState" />
    </template>
    <template #noticeBillDownloaded="{ row }">
      <ElTagBox :data="row.noticeBillDownloaded" :options="dataInfo.options.noticeBillDownloaded" />
    </template>
    <template #progress="{ row }">
      <WordProgress :progress="row.progress" :list="row.productionProgressList" />
    </template>
  </PageBox>
  <ElPupBox :pup="dataInfo.tableAdd.pup" :json="dataInfo.tableAdd.pup">
    <div class="orderType list-b-8">
      <div class="orderType-item" v-for="item in dataInfo.tableAdd.pup.orderType" @click="() => {
        if (proxy.$isFunction(dataInfo.tableAdd.pup.clickBtn)) {
          dataInfo.tableAdd.pup.clickBtn(item)
        }
      }">
        <h3>{{ item.label }}</h3>
      </div>
    </div>
  </ElPupBox>
  <ElPupFormBox :pup="pup">
    <template #default="{ form }">
      <ComBox isBg :data="form.list" :padding="0">
        <template #headLeft="{ row }">
          <p>生产单号：{{ row.billBaseData.produceTaskBillNo }}</p>
          <p>
            生产类型：{{ row.billBaseData.produceBillTypeName }}
          </p>
          <p>产品名称：{{ row.billBaseData.orderProductName }}</p>
          <p>版本：{{ row.billBaseData.orderProductVersion }}</p>
          <p>版面：{{ row.billBaseData.printingSurface }}</p>
        </template>
        <template #default="{ row }">
          <ElTableMxBox :isBorder="false" :tbody="row.wlMxDataList" :thead="[
            {
              label: '物料编码',
              prop: 'stockGoodsCode',
              align: 'center',
              width: 100,
            },
            {
              label: '物料类型',
              prop: 'categoryName',
              align: 'center',
              width: 100,
            },
            // {
            //   label: '供应商',
            //   prop: 'supplierName',
            //   align: 'left',
            //   width: 150,
            // },
            {
              label: '物料名称',
              prop: 'goodsName',
              align: 'left',
              width: 150,
            },
            {
              label: '规格型号',
              prop: 'stockGoodsName',
              align: 'left',
              width: 100,
            },
            {
              label: '申请数量',
              prop: 'planMaterialQuantity',
              align: 'left',
              width: 100,
            },
            {
              label: '单位',
              prop: 'goodsUnitName',
              align: 'left',
              width: 80,
            },
            {
              label: '使用机台',
              prop: 'equipmentName',
              align: 'left',
              width: 80,
            },
            {
              label: '备注',
              prop: 'produceMaterialRemark',
              align: 'left',
              width: null,
            },
          ]" />
        </template>
      </ComBox>
    </template>
  </ElPupFormBox>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
  }>(),
  {
  },
);
const pup = reactive({
  state: false,
  loading: false,
  typeName: 1,
  title: `批量领料`,
  form: {
    list: []
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        pup.loading = true
        proxy.$api.ProductionBusniess.BatchCreateGetProduceMaterialBills({
          produceTaskBillNoList: pup.form.list.map((el: any) => el.billBaseData.produceTaskBillNo),
          remark: '批量领料',
        })
          .then((res: any) => {
            pup.state = false
            proxy.$message('批量领料成功');
            router.push('/production/finishProduct');
          })
          .catch(() => {
            pup.loading = false
          });
      }
    }
  ]
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const batchPrint = (arr: any) => {
  setLoading('正在打印单据,请稍等');
  // 先定义 DownLoadTemplate 函数
  const list: any = []
  const DownLoadTemplate = (index: number = 0) => {
    const row = arr[index]
    console.log(index);
    // 假设 DownLoadTemplate 是一个返回 Promise 的 API 调用
    proxy.$api.Public.DownLoadTemplate({
      templateTypeCode: 'MBLX0002', // 模板类型编号
      customerCode: row.customerCode, // 客户编号
      condition: {
        ProductCode: row.productCode, // 产品编号
        SaleOrderCode: row.saleOrderCode,
        ProduceTaskBillNo: row.produceTaskBillNo,
      }, // 查询条件
    }).then((res: any) => {
      list.push(res)
      if (list.length !== arr.length) {
        DownLoadTemplate(index + 1)
      } else {
        list.forEach((el: any) => {
          window.open(el, '_blank');
        })
        dataInfo.loading = false;
      }
    })
      .catch(() => {
        dataInfo.loading = false;
      });
  };
  DownLoadTemplate(0)
};
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
const { dataInfo, getTbody, setLoading } = useListComponent();
</script>